/** @type {import('tailwindcss').Config} */

const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./public/index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
  theme: {
    colors: {
      // 主题色-命名
      // primary: "#3F85FF",
      dark: "var(--color-dark)",
      light: "var(--color-light)",

      primary: "var(--color-primary)",
      error: "var(--color-error)",
      success: "var(--color-success)",
      warning: "var(--color-warning)",

      // 文本颜色
      theme: "var(--color-text-theme)",
      main: "var(--color-text-main)",
      second: "var(--color-text-second)",
      third: "var(--color-text-third)",

      // 主要为背景色
      white: "#fff",
      black: "#000",
      page: "var(--color-bg-base)",
    },

    extend: {
      fontSize: {
        xs: "var(--size-text-xs)",
        sm: "var(--size-text-sm)",
        base: "var(--size-text-base)",
        lg: "var(--size-text-lg)",
        xl: "var(--size-text-xl)",
        "2xl": "var(--size-text-2xl)",
      },

      borderWidth: {
        1: "1px",
      },

      borderColor: {
        default: "#eee",
      },

      backgroundColor: {
        default: "#f1f1f1",
        // default: "#f1f6ff",
        // default: "#f1f1f1",
      },

      rounded: {
        xl: "32px",
      },

      boxShadow: {
        "t-xl": "0 -2px 12px 0 rgba(0,0,0,0.4)",
      },
    },
  },
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities({
        // ".line-clamp": {
        //   "min-width ": 0,
        //   overflow: "hidden",
        //   "text-overflow": "ellipsis",
        //   "word-break ": "break-all",
        // },

        ".ellipsis": {
          "min-width": 0,
          overflow: "hidden",
          "white-space": "nowrap",
          "text-overflow": "ellipsis",
        },

        ".line-clamp": {
          overflow: "hidden", // 超出的文本隐藏
          "text-overflow": "ellipsis", // 溢出用省略号显示
          display: "-webkit-box", // 将对象作为弹性伸缩盒子模型显示。
          // "-webkit-line-clamp": 2, // 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
          "-webkit-box-orient": "vertical",
          "word-break ": "break-all",
        },

        ".type-primary": {
          "--type-color": "var(--color-primary)",
          "--type-color-bg": "var(--color-primary-bg)",
        },

        ".type-error": {
          "--type-color": "var(--color-error)",
          "--type-color-bg": "var(--color-error-bg)",
        },

        ".type-sucess": {
          "--type-color": "var(--color-success)",
        },
      });
    }),
  ],

  // 其他配置项 ...
  corePlugins: {
    // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发多端，你应该使用 process.env.TARO_ENV 环境变量来控制它
    preflight: false,
  },
};
